<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>鲜果中心</title>
    <link rel="stylesheet" href="./css/fruit.css">
    <link rel="stylesheet" href="./css/swiper-bundle.css">
</head>
<body>
<div class="fruit-container">
    <!--导航-->
    <div class="nav">
        <div class="container-box">
            <div class="nav-item ">
                <a href="./index.html">首页</a>
            </div>
            <div class="nav-item nav-item-active">
                <a href="./fruit.html">鲜果中心</a>
            </div>
            <div class="nav-item">
                <a href="">新闻动态</a>
            </div>
            <div class="logo">
                <img src="./images/logo.png" alt="logo">
            </div>
            <div class="nav-item">
                <a href="">关于我们</a>
            </div>
            <div class="nav-item">
                <a href="">种植基地</a>
            </div>
            <div class="nav-item">
                <a href="">联系我们</a>
            </div>
        </div>
    </div>
    <!--轮播图-->
    <div class="banner swiper">
        <div class="swiper-wrapper">
            <div style="background-image: url('./images/banner.jpg')" class="swiper-slide">
                <div class="info-box">
                    <h1>新鲜优选,品味生活!</h1>
                    <span>Fresh selection, savor life!</span>
                </div>
            </div>
            <div style="background-image: url('./images/banner2.jpg')" class="swiper-slide">
                <div class="info-box">
                    <h1>新鲜优选,品味生活!</h1>
                    <span>Fresh selection, savor life!</span>
                </div>
            </div>
            <div style="background-image: url('./images/banner3.jpg')" class="swiper-slide">
                <div class="info-box">
                    <h1>新鲜优选,品味生活!</h1>
                    <span>Fresh selection, savor life!</span>
                </div>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <div class="container-box">
        <!--面包屑-->
        <div class="current-box fade-left">
            当前位置：<a href="./index.html">首页</a> > <a href="./fruit.html">鲜果中心</a>
        </div>
        <!--鲜果中心-->
        <div class="fruit-box">
            <div class="container-box">
                <div class="header-box fade-right">
                    <img src="./images/logo2.png" alt="">
                    <span>鲜果中心</span>
                </div>
                <div class="classify-box fade-left">
                    <div class="item active"><a href="">本地水果</a></div>
                    <div class="item"><a href="">红提</a></div>
                    <div class="item"><a href="">蓝莓</a></div>
                    <div class="item"><a href="">桑椹</a></div>
                    <div class="item"><a href="">西柚</a></div>
                </div>
                <div class="fruit-list">
                    <div class="item fade-left">
                        <a href="">
                            <img src="./images/nm.png" alt="">
                            <span>柠檬</span>
                        </a>
                    </div>
                    <div class="item fade-right">
                        <a href="">
                            <img src="./images/bxg.png" alt="">
                            <span>百香果</span>
                        </a>
                    </div>
                    <div class="item fade-left">
                        <a href="">
                            <img src="./images/cz.png" alt="">
                            <span>橙子</span>
                        </a>
                    </div>
                    <div class="item fade-right">
                        <a href="">
                            <img src="./images/clz.png" alt="">
                            <span>车厘子</span>
                        </a>
                    </div>
                    <div class="item fade-left">
                        <a href="">
                            <img src="./images/sz.png" alt="">
                            <span>山竹</span>
                        </a>
                    </div>
                    <div class="item fade-right">
                        <a href="">
                            <img src="./images/hlg.png" alt="">
                            <span>火龙果</span>
                        </a>
                    </div>
                </div>
                <div class="pagination fade-left">
                    <a href="">首页</a>
                    <a href="">上一页</a>
                    <a href="" class="active">1</a>
                    <a href="">2</a>
                    <a href="">下一页</a>
                    <a href="">尾页</a>
                </div>

                <div style="margin-top: 126px;" class="classify-box fade-right">
                    <div class="item active"><a href="">进口水果</a></div>
                    <div class="item"><a href="">红毛丹</a></div>
                    <div class="item"><a href="">蛇果</a></div>
                    <div class="item"><a href="">水晶梨</a></div>
                    <div class="item"><a href="">毛叶枣</a></div>
                </div>
                <div class="fruit-list">
                    <div class="item fade-left">
                        <a href="">
                            <img src="./images/ll.png" alt="">
                            <span>榴莲</span>
                        </a>
                    </div>
                    <div class="item fade-right">
                        <a href="">
                            <img src="./images/mht.png" alt="">
                            <span>猕猴桃</span>
                        </a>
                    </div>
                    <div class="item fade-left">
                        <a href="">
                            <img src="./images/mg.png" alt="">
                            <span>芒果</span>
                        </a>
                    </div>
                    <div class="item fade-right">
                        <a href="">
                            <img src="./images/sl.png" alt="">
                            <span>石榴</span>
                        </a>
                    </div>
                    <div class="item fade-left">
                        <a href="">
                            <img src="./images/cm.png" alt="">
                            <span>草莓</span>
                        </a>
                    </div>
                    <div class="item fade-right">
                        <a href="">
                            <img src="./images/fl.png" alt="">
                            <span>凤梨</span>
                        </a>
                    </div>
                </div>
                <div class="pagination fade-left">
                    <a href="">首页</a>
                    <a href="">上一页</a>
                    <a href="" class="active">1</a>
                    <a href="">2</a>
                    <a href="">下一页</a>
                    <a href="">尾页</a>
                </div>
            </div>
        </div>
    </div>

    <!--底部 end-->
    <div class="footer-box">
        <img class="fade-right" src="./images/logo.png" alt="">
        <span class="fade-left">注：图片均来源于互联网</span>
        <span class="fade-right">地址：广西南宁市西乡塘区罗文大道33号</span>
        <span class="fade-left">COPYRIGHT © 果之司 | 数媒2202黄少玲 设计与制作版权所有</span>
    </div>

</div>
<script src="./javascript/swiper-bundle.js"></script>
<script>
    /*banner*/
    new Swiper('.banner', {
        autoplay: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
    });
    const allFadeLeft = document.querySelectorAll('.fade-left');
    const allFadeRight = document.querySelectorAll('.fade-right');

    // 定义一个函数，用于监听多个元素是否在窗口底部出现
    function listenElementsBottomAppearance(elements, threshold, type) {
        if (!elements || elements.length === 0) {
            return;
        }

        function foreachEle() {
            elements.forEach(function (element) {
                let elementRect = element.getBoundingClientRect();
                let elementBottom = elementRect.bottom;
                let viewportHeight = window.innerHeight;

                // 如果元素底部接近或超过视口底部指定的阈值
                if (elementBottom - threshold <= viewportHeight) {
                    // 执行回调函数，通知元素已经在视口底部附近
                    element.style.transform = 'translateX(0)';
                } else if (elementBottom >= viewportHeight + 500) {

                    element.style.transform = (type == 1 ? 'translateX(-300%)' : 'translateX(300%)');

                }
            });
        }

        //页面加载完成
        window.addEventListener('load', foreachEle)
        // 监听窗口滚动事件
        window.addEventListener('scroll', foreachEle);
    }

    // 调用函数进行监听
    listenElementsBottomAppearance(allFadeLeft, 200, 1);
    listenElementsBottomAppearance(allFadeRight, 200, 2);
</script>
</body>
</html>
